/* animation mixing
keyframe animation
@include animation('animation-name .4s 1')*/
@mixin animation($animate...) {
  $max: length($animate);
  $animations: '';

  @for $i from 1 through $max {
      $animations: #{$animations + nth($animate, $i)};

      @if $i < $max {
          $animations: #{$animations + ", "};
      }
  }
  -webkit-animation: $animations;
  -moz-animation:    $animations;
  -o-animation:      $animations;
  animation:         $animations;
}

@mixin keyframes($animationName) {
  @-webkit-keyframes #{$animationName} {
      $browser: '-webkit-'; @content;
  }
  @-moz-keyframes #{$animationName} {
      $browser: '-moz-'; @content;
  }
  @-o-keyframes #{$animationName} {
      $browser: '-o-'; @content;
  }
  @keyframes #{$animationName} {
      $browser: ''; @content;
  }
} $browser: null;




.preloader-cover{
	position:fixed;
	top:0; left:0;
	width:100%;
	height:100%;
	background:white;
	z-index:100;
}


$offset: 187;
$duration: 1.4s;

.spinner {
  @include animation(rotator $duration linear infinite);
  top: 50%;
  position: absolute;
  margin: -37px 0 0 -37px;
  left: 50%;
}


@include keyframes(rotator) {
  0% { #{$browser}transform: rotate(0deg); }
  100% { #{$browser}transform: rotate(270deg); }
}

.path {
  stroke-dasharray: $offset;
  stroke-dashoffset: 0;
  transform-origin: center;
  @include animation(dash $duration ease-in-out infinite, colors ($duration*4) ease-in-out infinite);
}

@include keyframes(colors) {
  0% { stroke: #4285F4; }
  25% { stroke: #DE3E35; }
  50% { stroke: #F7C223; }
  75% { stroke: #1B9A59; }
  100% { stroke: #4285F4; }
}

@include keyframes(dash) {
 0% { stroke-dashoffset: $offset; }
 50% {
   stroke-dashoffset: $offset/4;
   #{$browser}transform:rotate(135deg);
 }
 100% {
   stroke-dashoffset: $offset;
   #{$browser}transform:rotate(450deg);
 }
}

// @-webkit-keyframes rotator {
//   0% { transform: rotate(0deg); }
//   100% { transform: rotate(270deg); }
// }

// .path {
//   stroke-dasharray: $offset;
//   stroke-dashoffset: 0;
//   transform-origin: center;
//   @include animation(dash $duration ease-in-out infinite, colors ($duration*4) ease-in-out infinite);
// }

// @-webkit-keyframes colors {
// 	0% { stroke: #4285F4; }
// 	25% { stroke: #DE3E35; }
// 	50% { stroke: #F7C223; }
// 	75% { stroke: #1B9A59; }
//   100% { stroke: #4285F4; }
// }

// @-webkit-keyframes dash {
//  0% { stroke-dashoffset: $offset; }
//  50% {
//    stroke-dashoffset: $offset/4;
//    transform:rotate(135deg);
//  }
//  100% {
//    stroke-dashoffset: $offset;
//    transform:rotate(450deg);
//  }
// }